<?php get_instance()->view('common/header');?>
<style>
<!--
.webuploader-pick {
    position: relative;
    display: inline-block;
    cursor: pointer;
    background: #00b7ee;
    padding: 5px 15px;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    overflow: hidden;
}

.form-group {
    margin-bottom: 5px;
}

select.input-sm {
    padding: 2px;
}
.red{color:#e02222;}
.border{ border: 2px solid #28b779;}
-->
</style>
<div class="page-container home">
  <?php get_instance()->view('common/sidebar');?>
  <div class="page-content-wrapper">
	  <div class="page-content">
	    <div class="row">
	      <div class="col-md-12">
	        <!-- BEGIN PAGE TITLE & BREADCRUMB-->
	        <h3 class="page-title"> 调度中心 </h3>
	        <ul class="page-breadcrumb breadcrumb">
	          <li class="btn-group"> <a class="btn default ml_5 return" href="<?php echo getUrl('home');?>"><i class="fa fa-chevron-left"></i> 返回</a> </li>
	          <li> <i class="fa fa-home"></i> <a href="<?php echo getUrl('home');?>"> 首页  <i class="fa fa-angle-right"></i> </a></li>
	          <li><a href="javascript:void(0);">调度中心</a></li>
	        </ul>
	        <!-- END PAGE TITLE & BREADCRUMB-->
	      </div>
	    </div>
	    <div class="row">
				<div class="col-lg-4 col-md-3 col-sm-6 col-xs-12">
					<div class="dashboard-stat blue deliveryman-btn" style="cursor:pointer;">
						<div class="visual">
							<img src="<?php echo base_url('static/img/deliveryman.png');?>">
						</div>
						<div class="details">
							<div class="number user-total">
								0
							</div>
							<div class="desc">
								 工作配送员
							</div>
						</div>
					</div>
				</div>
				<script type="text/javascript">
					$(function(){
						$('.deliveryman-btn').click(function(){
							window.open('<?php echo getUrl('deliveryman/member?worke_status=2');?>');
						});
					});
				</script>
				<div class="col-lg-4 col-md-3 col-sm-6 col-xs-12">
					<div class="dashboard-stat red">
						<div class="visual">
							<img src="<?php echo base_url('static/img/no_order.png');?>">
						</div>
						<div class="details">
							<div class="number status1">
							0
							</div>
							<div class="desc">
								未接单数
							</div>
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-md-3 col-sm-6 col-xs-12">
					<div class="dashboard-stat purple">
						<div class="visual">
							<img src="<?php echo base_url('static/img/deliverymanimg.png');?>">
						</div>
						<div class="details">
							<div class="number status3">
								0
							</div>
							<div class="desc">
								 配送中
							</div>
						</div>
					</div>
				</div>
			</div>
	    <div class="row" style="margin-top:10px;">
	      <div class="col-md-7">
	      		<div class="row">
			      <div class="col-md-12">
					<input class="form-control" type="text" id="suggestId" placeholder="搜索区域">
					<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
			      </div>
			    </div>
	      		<div style="height:500px;width:100%;margin-top:10px;" id="allmap"></div>
	      		<script type="text/javascript">
	      			var map = null;
	      			var orderLongitude = 0;
	      			var orderLatitude = 0;
	      			var courier = [];
	      			var order = null;
	      			var myValue;
	      			var oldLongitude = 0;
	      			var oldLatitude = 0;
	      			var clickOrder = false;
	      			var selectOrderOcde = '';
	      			var isLoadingList = false;
					$(function(){
						map = new BMap.Map("allmap");           
						map.centerAndZoom("合肥", 16);
						map.enableScrollWheelZoom(true);
						var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
							{"input" : "suggestId"
							,"location" : map
						});

						ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
							var str = "";
								var _value = e.fromitem.value;
								var value = "";
								if (e.fromitem.index > -1) {
									value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
								}    
								str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
								
								value = "";
								if (e.toitem.index > -1) {
									_value = e.toitem.value;
									value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
								}    
								str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
								G("searchResultPanel").innerHTML = str;
							});

						var myValue;
						ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
						var _value = e.item.value;
							myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
							G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
							orderLongitude = 0;
			      			orderLatitude = 0;
			      			ordrer = null;
							setPlace();
						});

						var init = true;
						map.addEventListener("tilesloaded",function(){

							if(init){
								var myGeo = new BMap.Geocoder();
								// 将地址解析结果显示在地图上,并调整地图视野
								myGeo.getPoint("合肥", function(point){
									if (point) {
										
// 										$('[name="longitude"]').val(point.lng);
// 										$('[name="latitude"]').val(point.lat);
										getCourier(point.lng, point.lat);
									}
	
									datatable_init({
										src: $("#datatable"),
										sAjaxSource: "<?php echo getUrl('deliveryman/dispatchCenter/getList');?>",
										"bProcessing": false,
										"aLengthMenu": [[10, 50, 100], [10, 50, 100]],
							            bSort:false,
							            "sDom": "<'row'<'col-md-5 col-sm-12'<'table-group-actions pull-right'>>r><'table-scrollable't><'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'>r>>",
							            'fnDrawCallback':function( oSettings ) { 
								            var status = false;
							            	$('#datatable').find('tr').each(function(){
												var code = $(this).find('.order-code').html();
												if(code == selectOrderOcde){
													$(this).addClass('border');
													status = true;
												}
								            }); 

							            	isLoadingList = true; 
							            	if(status){
							            		clickOrder = true; 
							            	}else{
							            		clickOrder = false; 
							            		order = null;
								            }
							            } 
									});	
								}, "合肥市");
	
								init = false;
							}
						});

						function setPlace(){
							map.clearOverlays();    //清除地图上所有覆盖物
							function myFun(){
								var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
								map.centerAndZoom(pp, 16);
								var lng = pp.lng;
								var lat = pp.lat;
								getCourier(lng, lat);
								$('[name="longitude"]').val(lng);
								$('[name="latitude"]').val(lat);
								if(isLoadingList){
									isLoadingList = false;
									$('#datatable').dataTable().fnDraw();
								}
							}
							var local = new BMap.LocalSearch(map, { //智能搜索
							  onSearchComplete: myFun
							});
							local.search(myValue);
						}

						function G(id) {
							return document.getElementById(id);
						}

						$('#suggestId').change(function(){

							if($(this).val() == ''){
								$('[name="longitude"]').val('');
								$('[name="latitude"]').val('');	
								if(isLoadingList){
									isLoadingList = false;
									$('#datatable').dataTable().fnDraw();
								}
							}
						});
					});

					var time = null;
					function getCourier(longitude, latitude){

						if(time != null){
		      			 	window.clearTimeout(time);
		      			}
						
						$.ajax({
				 			url:"<?php echo getUrl('deliveryman/dispatchCenter/getCourier');?>?longitude="+longitude+'&latitude='+latitude,
				 			dataType:'json',
				 			success:function(data){
								if(data.status > 0){
									map.clearOverlays();
									for(var k in data.data){
										var pt = new BMap.Point(data.data[k].longitude, data.data[k].latitude);
										var myIcon = new BMap.Icon("<?php echo base_url('static/img/courier.png');?>", new BMap.Size(50,50));
										var marker2 = new BMap.Marker(pt, {icon:myIcon});  // 创建标注
										map.addOverlay(marker2); 
										marker2.addEventListener("click", function(e){
											var point = e.target.getPosition(); 
											var modal = $('#courier-modal');
											var user = [];
											var i = 0;
											for(var k in courier){
												if(courier[k].longitude == point.lng && courier[k].latitude == point.lat){
													user[i] = courier[k];
													i++;
												}
											}

											if(user.length == 1){
												showOrderOrUser(user[0]);
											}else if(user.length >= 2){
												var modal = $('#select-courier-modal');
												var option = '<option value=""></option>';
												$.each(user, function(k,v){
													option += '<option value="'+v.id+'">'+v.name+'</option>';
												});
												modal.find('select').html(option).select2();
												modal.find('.show_message_error').remove();
												modal.modal();
											}
										});
									}

									courier = data.data;	
								}

				      			if(orderLatitude > 0){
									var pt = new BMap.Point(orderLongitude, orderLatitude);
									var myIcon = new BMap.Icon("<?php echo base_url('static/img/order.png');?>", new BMap.Size(50,50));
									var marker2 = new BMap.Marker(pt, {icon:myIcon});  // 创建标注
									map.addOverlay(marker2); 

									if(clickOrder){
										map.panTo(pt);
										clickOrder = false;
									}
									marker2.addEventListener("click", function(e){

										var point = e.target.getPosition(); 
										var modal = $('#courier-modal');
										modal.find('.order-code').html(order.code);
										modal.find('.order-number').html(order.number);
										modal.find('.order-send_user').html(order.send_user);
										modal.find('.order-send_address').html(order.send_address);
										modal.find('.order-send_mobile').html(order.send_mobile);
										modal.find('.order-send_to_user').html(order.send_to_user);
										modal.find('.order-send_to_mobile').html(order.send_to_mobile);
										modal.find('.order-send_to_address').html(order.send_to_address);
										modal.find('.order-distance').html(order.send_distance);
										modal.find('.order-income').html(order.income);
										modal.find('.modal-title').html('订单信息');
										modal.find('.order').removeClass('hide');
										modal.find('.courier,.modal-footer').addClass('hide');
										modal.find('.order-distance1').parents('.order').addClass('hide');
										modal.modal();
									});
				      			}

				      			time = setTimeout('getCourier('+longitude+', '+latitude+');', 10000);
					 		}
				 		});


						$.ajax({
				 			url:"<?php echo getUrl('deliveryman/dispatchCenter/getStatistics');?>?longitude="+longitude+'&latitude='+latitude,
				 			dataType:'json',
				 			success:function(data){
								if(data.status > 0){
									var data = data.data;
									$('.user-total').html(data.user);	
									$('.status1').html(data.status1);	
									$('.status2').html(data.status2);	
									$('.status3').html(data.status3);	
									$('.status4').html(data.status4);	
									$('.status5').html(data.status5);	

									if(isLoadingList){
										isLoadingList = false;
										$('#datatable').dataTable().fnDraw(false);
									}
								}
					 		}
				 		});
					}

					function showOrderOrUser(user){

						var modal = $('#courier-modal');
						modal.find('.name').html(user.name);
						modal.find('.portrait').html('<img style="height:100px;" src="'+user.portrait+'">');
						modal.find('.mobile').html(user.mobile);
						modal.find('[name="deliveryman_id"]').val(user.id);
						if(order != null){
							modal.find('.order-distance1').html(user.distance);
							modal.find('.order-order-number').html(user.order_number);
							modal.find('.order-code').html(order.code);
							modal.find('.order-number').html(order.number);
							modal.find('.order-send_user').html(order.send_user);
							modal.find('.order-send_address').html(order.send_address);
							modal.find('.order-send_mobile').html(order.send_mobile);
							modal.find('.order-send_to_user').html(order.send_to_user);
							modal.find('.order-send_to_mobile').html(order.send_to_mobile);
							modal.find('.order-send_to_address').html(order.send_to_address);
							modal.find('.order-distance').html(order.send_distance);
							modal.find('.order-income').html(order.income);
							modal.find('.modal-title').html('分配配送员');
							modal.find('.order,.modal-footer').removeClass('hide');
							if(user.id == order.deliveryman_id){
								modal.find('.modal-footer').addClass('hide');
								modal.find('.modal-title').html('订单配送信息');
							}
							modal.find('[name="id"]').val(order.id);
						}else{
							modal.find('.order,.modal-footer').addClass('hide');
							modal.find('.modal-title').html('配送员信息');
						}

						modal.find('.courier').removeClass('hide');
						modal.modal();
					}
	      		</script>
	      </div>
	      <div class="col-md-5">
	      	<input type="hidden" name="latitude" class="form-filter">
	    	<input type="hidden" name="longitude" class="form-filter">
	    	<div class="portlet">
	            <div class="portlet-body">
	            <div class="btn-group">
					<button type="button" class="btn btn-default blue status-btn" v="1">未接单（<span class="status1">0</span>）</button>
					<button type="button" class="btn btn-default status-btn" v="2">待取货（<span class="status2">0</span>）</button>
					<button type="button" class="btn btn-default status-btn" v="3">配送中（<span class="status4">0</span>）</button>
					<button type="button" class="btn btn-default status-btn" v="0">所有（<span class="status5">0</span>）</button>
				</div>
				<script type="text/javascript">
					$(function(){
						$('.status-btn').click(function(){

							if( ! isLoadingList){
								show_message({status: 0, message: '列表正在刷新，请稍后切换。'});
								return false;
							}
							
							$('.status-btn').removeClass('blue');
							$(this).addClass('blue');
							var v = $(this).attr('v');
							$('[name="status"]').val(v);
							if(isLoadingList){
								isLoadingList = false;
								$('#datatable').dataTable().fnDraw();
							}
						});
						$('[name="status"]').val(1);
					});
				</script>
	              <div class="table-container">
	                <div class="table-actions-wrapper"> <span> </span>
                    </div>
	                <table class="table table-bordered table-hover scoll-title" id="datatable">
	                  <thead>
	                    <tr role="row" class="heading">
	                      <th width="23%">运单编号<p>(订单号)</p><input type="hidden" value="1" name="status" class="form-control form-filter"/></th>
	                      <th width="20%">配送员</th>
						  <th width="10%">配送费</th>
						  <th width="15%">类型</th>
	                      <th width="22%">时间状态</th>
	                      <th width="10%">操作</th>
	                    </tr>
	                    <tr>
							<th>
								<input class="form-control form-filter input-sm" name="code" type="text">
							</th>
	                      	<th>
								<input class="form-control form-filter input-sm" name="deliveryman" type="text" placeholder="名称或手机号码">
							<th></th>
							<th>
								<select name="type" class="form-control form-filter input-sm">
								<option value="" selected="selected">所有</option>
								<?php foreach ($type as $k => $v):?>
								<option value="<?php echo $k;?>"><?php echo $v;?></option>
								<?php endforeach;?>
							</select>
							</th>
							<th></th>
	                      <th> <div class="btn-group">
							<a class="btn btn-xs filter-submit btn-default">
								<i class="fa fa-search"></i> 搜索
							</a>
						</div></th>
	                    </tr>
	                  </thead>
	                  <tbody>
	                  </tbody>
	                </table>
	              </div>
	            </div>
	          </div>
	      </div>
	    </div>
	  </div>
  </div>
</div>
<div id="courier-modal" class="modal modal_small" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h4 class="modal-title">配送员信息</h4>
      </div>
      <form class="form-horizontal" id="auth-form" method="post" action="<?php echo getUrl('deliveryman/dispatchCenter/allot');?>">
        <div class="modal-body">
        	<div class="form-group order">
                <label class="control-label col-md-4">订单编号：</label>
                <div class="col-md-8 text order-code">
                  	 
                </div>
            </div>
            <div class="form-group order">
                <label class="control-label col-md-4">订单号：</label>
                <div class="col-md-8 text order-number">

                </div>
            </div>
            <div class="form-group order">
                <label class="control-label col-md-4">店铺名称：</label>
                <div class="col-md-8 text order-send_user">
                  	 
                </div>
            </div>
            <div class="form-group order">
                <label class="control-label col-md-4">店铺地址：</label>
                <div class="col-md-8 text order-send_address">
                  	 
                </div>
            </div>
            <div class="form-group order">
                <label class="control-label col-md-4">联系电话：</label>
                <div class="col-md-8 text order-send_mobile">
                  	 
                </div>
            </div>
            <div class="form-group order">
                <label class="control-label col-md-4">下单人：</label>
                <div class="col-md-8 text order-send_to_user">
                  	 
                </div>
            </div>
            <div class="form-group order">
                <label class="control-label col-md-4">下单人电话：</label>
                <div class="col-md-8 text order-send_to_mobile">
                  	 
                </div>
            </div>
            <div class="form-group order">
                <label class="control-label col-md-4">目的地：</label>
                <div class="col-md-8 text order-send_to_address">
                  	 
                </div>
            </div>
            <div class="form-group order">
                <label class="control-label col-md-4">配送距离：</label>
                <div class="col-md-8 text order-distance">
                  	 
                </div>
            </div>
            <div class="form-group order">
                <label class="control-label col-md-4">配送费：</label>
                <div class="col-md-8 text order-income">
                  	 
                </div>
            </div>
            <div class="form-group courier">
                <label class="control-label col-md-4">分配配送员：</label>
                <div class="col-md-8 text name">
                  	 
                </div>
            </div>
            <div class="form-group courier">
                <label class="control-label col-md-4">配送员头像：</label>
                <div class="col-md-8 text portrait">
                   
                </div>
            </div>
            <div class="form-group courier">
                <label class="control-label col-md-4">配送员电话：</label>
                <div class="col-md-8 text mobile">
                    
                </div>
            </div>
            <div class="form-group order">
                <label class="control-label col-md-4">距离取货距离：</label>
                <div class="col-md-8 text order-distance1">
                  	 
                </div>
            </div>
            <div class="form-group order">
                <label class="control-label col-md-4">未完成的订单：</label>
                <div class="col-md-8 text order-order-number red" style="font-weight:600;font-size:18px;">
                  	 
                </div>
            </div>
        </div>
        <div class="modal-footer">
          <input type="hidden" name="id"/>
          <input type="hidden" name="deliveryman_id"/>
          <?php if (adminAuthority('overtime_order-allot', 'deliveryman')):?>
          <button type="submit" class="btn green field-submit-btn"><i class="fa fa-save"></i> 确认分配</button>
          <?php endif;?>
        </div>
        </form>
        <script type="text/javascript">
			$(function(){
				$.e_validate.init('#auth-form',{modal:$('#courier-modal'),ignore:''});
			});
        </script>
    </div>
  </div>
</div>
<div id="select-courier-modal" class="modal modal_small" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h4 class="modal-title">选择要查看的配送员</h4>
      </div>
      <form class="form-horizontal" id="auth-form" method="post" action="<?php echo getUrl('deliveryman/dispatchCenter/allot');?>">
        <div class="modal-body">
        	<div class="note note-success">
				<p>
					 由于坐标重叠，请选择你要查看的配送员。
				</p>
			</div>
        	<div class="form-group order">
                <label class="control-label col-md-2">配送员：</label>
                <div class="col-md-9">
                  	<select class="form-control" placeholder="选择配员">
                  		
                  	</select> 
                </div>
            </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn green field-submit-btn"><i class="fa fa-save"></i> 确认</button>
        </div>
        </form>
        <script type="text/javascript">
			$(function(){
				var modal = $('#select-courier-modal');
				modal.find('.field-submit-btn').click(function(){
					var id = modal.find('select').val();
					if( ! id){
						show_modal_message({status:0,message:"请选择你要查看的配送员"}, modal.find('.modal-body'));
						return false;
					}

					var status = false;
					$.each(courier, function(k,v){
						if(v.id == id){
							showOrderOrUser(v);	
							status = true;
							modal.modal('hide');
						}
					});

					if(status){
						show_modal_message({status:0,message:"改配送员已离开了该区域"}, modal.find('.modal-body'));
					}
				});
			});
        </script>
    </div>
  </div>
</div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=<?php echo $ak;?>"></script>
<script type="text/javascript">
	$(function(){
		
        $('[dp]').not("[noinit]").datepicker({
            changeMonth: true,
            autoclose: true,
            format: "yyyy-mm-dd",
            language: 'zh-CN'
        });

        $('#datatable').find('tr>td').live('click', function(){

        	
            var tr = $(this).parents('tr');
            var lng = tr.find('.longitude');
            var border = tr.attr('class');
            $('#datatable').find('tr').removeClass('border');
            if(lng.length > 0 && border.indexOf('border') == -1){
            	tr.addClass('border')
            	var lat = tr.find('.latitude').html();
				var lng = lng.html();
				orderLongitude = lng;
      			orderLatitude = lat;
      			order = eval('('+tr.find('.order').html()+')');
				getCourier(lng, lat);
				selectOrderOcde = tr.find('.order-code').html();
				clickOrder = true;
            }else{
            	selectOrderOcde = '';
            	map.centerAndZoom("合肥", 16);
            	orderLongitude = 0;
      			orderLatitude = 0;
      			clickOrder = false;
      			order = null;
            }
         });
	});
</script>
</body>
</html>